<template>
    <div class="gal-root" ref="galContent" @scroll="content_ScrollEvent">

        <!-- 检索栏 -->
        <mySelect @change="select_ChangeEvent" id="mySelect"></mySelect>

        <!-- 设置栏 -->
        <mySetting @change="setting_ChangeEvent" id="mySetting"></mySetting>

        <!-- 回到顶部 -->
        <myGtoTop></myGtoTop>

        <!-- 列表栏 -->
        <div class="gal-content gtoTop">
            <TransitionGroup :css="false" @enter="galItem_EnterEvent">
                <div v-for="(item, index) in dataList" :key="index" :curData="item"
                    @click="gtoGalInfo_ClickEvent(item.id)" class="gal-item">
                    <div class="back"></div>
                    <div class="content">
                        <div class="item-title">{{ item.name }}</div>
                        <div class="item-tag">

                            <div v-show="setting.isCG" :class="item.isCG == 0 ? 'r' : 'g'" :key="srttingIndex">CG
                            </div>
                            <div v-show="setting.isCN" :class="getCN(item.isCN)[1]" :key="srttingIndex">
                                {{ getCN(item.isCN)[0] }}
                            </div>
                            <div v-show="setting.isBug" :class="item.bug ? 'r' : 'g'" :key="srttingIndex">Bug</div>

                        </div>
                    </div>
                </div>

                <div class="gal-item" v-if="pageData.page == pageData.maxPage">
                    <div class="back"></div>
                    <div class="item-bot">
                        已经 结束了
                    </div>
                </div>

                <div class="gal-item" v-if="dataList.length == 0">
                    <div class="back"></div>
                    <div class="item-bot">
                        好像没有资源哦
                    </div>
                </div>
            </TransitionGroup>
        </div>

    </div>
</template>

<script setup>
import { onMounted, onUpdated } from 'vue'
import { getGalList_API } from '@/axios/api/gal.js'
import mySelect from './select.vue'
import mySetting from './setting.vue'
import myGtoTop from '@/components/layout/item/gtoTop.vue'
import { useFileStores } from '@/stores/index.js'

const fileStores = useFileStores();

const dataList = ref([]);
let isLoad = false;
const srttingIndex = ref(0);//用来控制sttring的刷新


let pageData = {
    page: 1,
    perPage: 50,
};
const selectData = ref({
    text: '',
    tagId: '',
    order: 0,//0:不排序 1:按上传时间 2:按名字首字母
});
const setting = ref({
    isCG: true,
    isCN: true,
    isBug: true,
});


defineOptions({
    name: 'gal',
})

onMounted(() => {
    selectData.value = fileStores.getSelectGalTagToString();
    loadLastPage(1);
})

onUpdated(() => {
    console.log(curScroll)
    galContent.value.scrollTop = curScroll;
})

//#region 触底加载
let curScroll = 0;
const galContent = ref();
const content_ScrollEvent = (e) => {
    const { page, maxPage } = pageData;
    if (page >= maxPage) return;
    const height = galContent.value.clientHeight;
    const cur = e.target;
    if (cur.scrollTop + height + 20 > cur.scrollHeight) {
        loadLastPage(pageData.page + 1);
    }
    curScroll = cur.scrollTop;
}
//#endregion

//#region 侧边栏
const setting_ChangeEvent = (data) => {
    setting.value = data;
    srttingIndex.value += 1;
}

const getCN = (index) => {
    switch (index) {
        case 0:
            return ['未知', 'r'];
        case 3:
            return ['生肉', 'r'];
        case 1:
            return ['汉化', 'g'];
        case 2:
            return ['官中', 'g'];
        case 4:
            return ['AI', 'g'];
        case 5:
            return ['部分', 'y'];
        case 6:
            return ['机翻', 'y'];
    }
}

const select_ChangeEvent = (data) => {
    fileStores.setSelectGalTag(data);
    selectData.value = fileStores.getSelectGalTagToString();//重拉取
    loadLastPage(1)
}
//#endregion

const loadLastPage = (page) => {
    if (isLoad) return;
    isLoad = true;
    loading.show();
    const { perPage } = pageData;
    const { text, tagId, order } = selectData.value;

    getGalList_API({
        page: page,
        perPage: perPage,
        order: order,
        text: text,
        tagId: tagId,
    }).then(res => {
        if (page == 1) {
            dataList.value = res.result.data;
        } else {
            for (let i = 0; i < res.result.data.length; i++) {
                dataList.value.push(res.result.data[i]);
            }
        }
        pageData = res.result.page;
    }).finally(() => {
        loading.hide();
        isLoad = false;
    })
}

const gtoGalInfo_ClickEvent = (id) => {
    router.push('/gal/info?id=' + id);
}
</script>

<style scoped lang="scss">
.gal-root {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-image: url('$/images/00.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .gal-content {
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding-bottom: 10px;

        .gal-item {
            box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
            height: 40px;
            margin-top: 10px;
            position: relative;
            font-weight: 900;

            .content {
                position: absolute;
                border-radius: 7px;
                top: 0;
                left: 0;
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 100%;
                color: rgb(66, 66, 66);
                background: rgba(255, 255, 255, 0.3);
                box-shadow: 0 0 10px -5px #3572EF;
                cursor: pointer;

                .item-title {
                    width: 90%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    line-height: 40px;
                    margin-left: 10px;
                }

                .item-tag {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    margin-right: 10px;

                    >div {
                        width: 50px;
                        height: 24px;
                        border-radius: 5px;
                        margin-right: 5px;
                        color: white;
                        text-align: center;
                        line-height: 24px;
                    }
                }
            }

            .content:hover {
                transition-duration: 0.3s;
                background: rgba(58, 190, 249, 0.4);
                box-shadow: 0 0 10px -3px #3572EF;
            }

            .back {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                filter: blur(5px);
                background-image: url('$/images/00.jpg');
                background-attachment: fixed;
                background-position: center;
                background-size: cover;
            }

            .item-bot {
                width: 100%;
                line-height: 40px;
                text-align: center;
                font-size: 20px;
                position: absolute;
                border-radius: 7px;
                top: 0;
                left: 0;
                color: rgb(66, 66, 66);
                background: rgba(255, 255, 255, 0.3);
                box-shadow: 0 0 10px -5px #3572EF;

            }
        }

    }
}
</style>
